<script id="slideTemplate" type="text/x-jquery-tmpl"> 
     <div class="thumbnailHeader">
        <div class="handle"></div>
        <div class="title">${title}</div>
        
        <div class="buttons">
            <span class="displayLength headerDisplayLength">${displayLength}</span>
            <div class="toggleEnabledWrapper"><input class="toggleEnabled" type="checkbox" ${checked} /></div>
            &nbsp;
            <input type="button" class="delete" value="Delete" />
            <input type="button" class="edit" value="Edit" />
            <input type="button" class="toggleExpanded" value="T" />
        </div>
        <div class="ui-helper-clearfix"></div>
    </div>
    <div class="thumbnailExpandedInfo">
        <table>
            <tbody>
                <tr>
                    <td>
                        <div class="thumbnailPreview"></div>
                    </td>
                    <td style="padding-left: 10px;">
                        <div style="font-weight: bold;">Duration: </div>
                        
                        <div class="ui-helper-clearfix" style="margin: 10px 0 7px 0;">
                            <span style="float: left">Min: </span>                        
                            <div style="width: 100px; margin: 0px 0px 0px 15px; float: left;">
                                <div class="displayLengthMinutesSlider"></div>
                            </div>
                        </div>
                        <div class="ui-helper-clearfix">
                            <span style="float: left">Sec: </span> 
                            <div style="width: 100px; margin: 0px 0px 0px 15px; float: left;">
                                <div class="displayLengthSecondsSlider"></div>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="expandedDisplayLength displayLength"></div>
                    </td>
                </tr>
            </tbody>
        </table>
     </div>
     <div class="ui-helper-clearfix"></div>
</script>

<input type="hidden" id="slidestreamId" value="<?php echo $this->slidestream->slidestreamId; ?>" />
<input type="hidden" id="deviceRedirect" value="<?php echo $this->deviceRedirect ? $this->deviceRedirect : 0; ?>" />
 
<div id="addSlideDialog">
    <div id="addSlideDescription" class="workspace">
        <div id="newSlideTypeName"></div>
        <div id="newSlideTypeIcon"></div>
        <div id="newSlideTypeTitle">Select slide type</div>
        <div id="newSlideTypeDescription"></div>
        <input type="button" id="createSlideButton" value="Create Slide" />
    </div>
   <div id="newSlideSelect">
        <ul>
            <li><a href="#create_new">Create New Slide</a></li>
            <?php //<li><a href="#create_my">My Slides</a></li> ?>
            <?php //<li><a href="#create_community">Community Slides</a></li> ?>
        </ul>
        <div id="create_new">
            <?php foreach ($this->slidetypes as $s): ?>
            <div class="slideTypeWrapper" style="background-image:url(<?php echo $this->baseUrl(); ?>/loadable/slidetype/<?php echo $s['name']; ?>/icon.png);">
                <a class="slideTypeSelector" href="">
                    <span class="slideTypeName"><?php echo $s['name']; ?></span>
                    <span class="slideTypeDescription"><?php echo $s['object']->getDescription(); ?></span>
                    <span class="slideTypeTitle"><?php echo $s['object']->getTitle(); ?></span>
                </a>
            </div>
            <?php endforeach; ?>
            <div class="ui-helper-clearfix"></div> 
        </div>
        <?php /*
        <div id="create_my">
            My Slides!
        </div> 
        <div id="create_community">
            Community Slides
        </div>
        */ ?>
    </div> 
</div>

<div>
    <div id="slidestreamHeader">
        Slidestream: <?php echo $this->slidestream->title; ?>
        <div style="float: right;">
            <span id="statusAlert" class="ui-state-highlight"></span>
            <a id="viewSlideShowButton" class="ui-state-default linkButton" target="_blank" href="<?php echo $this->url(array('module' => 'sign', 'action' => 'view', 'slidestreamId' => $this->slidestream->slidestreamId), 'sign', true); ?>">View Slideshow<span class="ui-icon ui-icon-image"></span></a>
            <a id="saveSlidestreamButton" class="ui-state-default linkButton">Save Slidestream<span class="ui-icon ui-icon-disk"></span></a>
        </div>
    </div>
    <div id="editorMain" class="yui-g">
    
        <div id="timelineWrapper" class="yui-u first">
            <div id="timelineSettings" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
                <div id="timelineHeader" class="ui-widget-header ui-corner-all">
                    <a id="addSlideButton" class="ui-state-default linkButton">Add Slide<span class="ui-icon ui-icon-plusthick"></span></a>
                    <span id="totalSlides"></span> lasting <span id="totalRunningTime"></span>
                </div>        
                <div id="timeline" class="workspace">
                    <div id="timelineContent">
                        <div id="timelineThumbs"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="slidestreamSettingsWrapper" class="yui-u">
            
            <div id="slidestreamSettings">
                <ul>
                    <li><a href="#slidestreamSettingsTab">Settings</a></li>
                <?php foreach ($this->slidestreamPlugins as $p): ?>
                    <li><a href="<?php echo '#' . $p['name']; ?>"><?php echo $p['object']->getTitle(); ?></a></li>
                <?php endforeach; ?>
                </ul>
                
                <div class="plugin" id="slidestreamSettingsTab">
                    <span style="font-size: 1.3em;">Title: </span><input id="slidestreamTitle" value="<?php echo $this->slidestream->title; ?>" />
                    
                    <div id="slidestreamStats" style="margin-top: 25px;">
                        
                    </div>
                </div>
                <?php foreach ($this->slidestreamPlugins as $p): ?>
                <div class="plugin" id="<?php echo $p['name']; ?>">
                    <?php echo $p['object']->getConfigurationForm(1); ?>
                </div>
                <?php endforeach; ?>            
            </div>
                       
            <div id="deviceSettings" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
                <div id="deviceSettingsHeader" class="ui-widget-header ui-corner-all">
                    <span style="float: right;">
                        <a id="showDeviceListButton" class="ui-state-default linkButton">List View<span class="ui-icon ui-icon-document"></span></a>
                        <a id="addDeviceButton" class="ui-state-default linkButton">Add Device<span class="ui-icon ui-icon-plusthick"></span></a>
                    </span>
                    <span id="deviceCount"></span>               
                </div>
                <div id="deviceSettingsContent">
                    <div id="deviceMap"></div>
                    <div id="deviceListWrapper">
                        <div id="deviceSearchWrapper">
                            <input type="text" id="deviceSearch" placeholder="Search..." />
                        </div>
                        <div id="deviceList"></div>
                    </div>
                </div>
            </div>
        
        </div>
    </div>
</div> 

<div class="ui-helper-clearfix"></div>
<br />

<div id="editSlideDialog" class="yui-g">

    <div id="previewPane" class="yui-u first workspace"> 
        <div id="previewPaneContent">
            <div id="previewImage"></div>
            <div id="previewInfo">
                
            </div>
        </div>
    </div>    
    
    <div id="slidePluginsPanel" class="yui-u">
        <div id="slidePlugins">
        <ul>
            <li><a href="#typeSettings">Settings</a></li>
            <?php foreach ($this->slidePlugins as $m): ?>
            <li><a href="#<?php echo $m['name']; ?>"><?php echo $m['object']->getTitle(); ?></a></li>
            <?php endforeach; ?>
        </ul>
        
        <div id="typeSettings">
            <div class="zend_form">
                <span><label class="optional" for="previewInfoTitle">Title:</label></span>
                <div class="elm"><input type="text" id="previewInfoTitle" /></div>
            </div>
            <div id="typeSettingsFormContainer"></div>
        </div>
        <?php foreach ($this->slidePlugins as $m): ?>
            <div id="<?php echo $m['name']; ?>">
                <?php echo $m['object']->getConfigurationForm(1); ?>
            </div>
        <?php endforeach; ?>
        </div>
    </div>
</div>

<div id="addDeviceDialog">
    <div id="deviceDescriptionWrapper" class="workspace">
        <div id="deviceIcon"></div>
        <div id="deviceIp">Select device</div>
        <div id="deviceName"></div>
        <div id="deviceDescription"></div>
        <input type="hidden" id="deviceLat" />
        <input type="hidden" id="deviceLng" />
        <input type="hidden" id="deviceId" />
        <input type="button" id="assignDeviceButton" value="Assign Device" />
    </div>
   <div id="deviceSelect">
        <ul>
            <li><a href="#add_my_device">My Devices</a></li>
        </ul>
        <div id="add_my_device"></div>
    </div> 
</div>